<html>
<head>
<link href="css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="JavaScript/jquery-1.7.1.js"></script>
<script type="text/javascript" src="JavaScript/common.js"></script>
<script type="text/javascript" src="JavaScript/commonValidation.js"></script>
<script type="text/javascript" src="JavaScript/dropdown.js"></script>
<link href='http://fonts.googleapis.com/css?family=Belgrano' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
	
</head>
<body>
	<h1 class="header" align="center" width="100%"><u>View Trip</u></h1>
	<form class="form-style-1" method="post">
		<div width="100%" align="center" style="padding-top: 30px;padding-botom:30px">
			<table border="0" width="70%" >
				<tr>
					<td style="vertical-align: top" >Create Trip for Schedule 20:00 </td>					
				</tr>
				<tr>
					<td style="vertical-align: top" align="left"><input type="button" value="Create"/>  <input type="button" value="Search Trip"/></td>					
				</tr>
			</table>
		</div>
	</form>
	<form method="get" >
		<div width="100%" align="center" style="padding-top: 30px;padding-botom:30px">
			<table cellpadding="0px" cellspacing="0px">
				<tr>
					<td
						style="border-style: solid none solid solid; border-color: #4B7B9F; border-width: 1px;">
						<input type="text" name="zoom_query"
						style="width: 100px; border: 0px solid; height: 17px; padding: 0px 3px; position: relative;">
					</td>
					<td
						style="border-style: solid; border-color: #4B7B9F; border-width: 1px;">
						<input type="submit" value=""
						style="border-style: none; background: url('images/searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
					</td>
				</tr>
			</table>
		</div>
	</form>

	<form >
		<div width="100%" align="center" >
			<div align="center"  id='cabDiv' style="width:71%;padding-top:0px;border:0px solid red;overflow:auto;" scrollHeight="100">
				<table border="0" width="99%" id="cabDtl">			
					<thead>
						<tr>
							<th style='display:none'></th>
							<th width="33%" align="center">Driver Id</th>
							<th width="33%" align="center">Cab No</th>
							<th width="33%" align="center">Capacity</th>
						</tr>
					</thead>
					<tbody>		
						<tr>
							<td style='display:none'><input type="hidden" name="schId"></td>
							<td align="center"><input type="Text"  maxlength="15" size="15" autocomplete='off'/></td>
							<td align="center"><input type="Text"  maxlength="15" size="15" autocomplete='off'/></td>
							<td align="center"><input type="Text"  maxlength="15" size="15" autocomplete='off' onkeypress="return common.isNumber(event)"/></td>
						</tr>
						<tr>
							<td style='display:none' colspan="4">
								<div>Test</div>
							</td>
						</tr>
						
						<tr>
							<td style='display:none'><input type="hidden" name="schId"></td>
							<td align="center"><input type="Text"  maxlength="15" size="15" autocomplete='off'/></td>
							<td align="center"><input type="Text"  maxlength="15" size="15" autocomplete='off'/></td>
							<td align="center"><input type="Text"  maxlength="15" size="15" autocomplete='off' onkeypress="return common.isNumber(event)"/></td>
						</tr>
						<tr>
							<td style='display:none'><input type="hidden" name="schId"></td>
							<td align="center"><input type="Text" maxlength="15" size="15" autocomplete='off'/></td>
							<td align="center"><input type="Text" maxlength="15" size="15" autocomplete='off'/></td>
							<td align="center"><input type="Text" maxlength="15" size="15" autocomplete='off' onkeypress="return common.isNumber(event)"/></td>
						</tr>
						<tr>
							<td style='display:none'><input type="hidden" name="schId"></td>
							<td align="center"><input type="Text" maxlength="15" size="15" autocomplete='off' /></td>
							<td align="center"><input type="Text" maxlength="15" size="15" autocomplete='off' /></td>
							<td align="center"><input type="Text" maxlength="15" size="15" autocomplete='off' onkeypress="return common.isNumber(event)"/></td>
						</tr>
					</tbody>
				</table>			
			</div>
		</div>
		<div width="100%" align="center">
			<table  width="70%" style="border:0px">
				<tr>
					<td colspan="5" align="right">
						<input type="button" value="Add New" id="addNew" /> 
						<input type="button" value="Save" id="save"/>
					</td>
				</tr>
			</table>
		</div>
	</form>	
</body>
<script>
	$(function() {
		$("#addNew").click(function() {
			$("#dummy").remove();
			$('#cabDtl tr').length>11?$("#cabDiv").css({"height":"500"}):null;
			
				$('#cabDtl > tbody').append("<tr>"
			+ "<td style='display:none' ><input type='hidden' name='cabId'></td>"
			+ "<td align='center'><input type='Text' maxlength='15' size='15' autocomplete='off' /></td>"
			+ "<td align='center'><input type='Text' maxlength='15' size='15' autocomplete='off' /></td>"
			+ "<td align='center'><input type='Text' maxlength='15' size='15' onkeypress='return common.isNumber(event)' autocomplete='off'/></td>"
			+ "</tr>").slideDown("slow");
		});	

		 var headers = ['schId','driverId','capNo','capacity'];
		 var ColName = ['','Driver Id','Cab No','Capacity'];
		 
		 var json = {"list": [
		                  ]
		              };
		 
		 

		// Builds the HTML Table out of myList.
		function buildHtmlTable(json) {			
			$("#cabDtl").empty();
		    $("#cabDtl").append("<thead><tr><th style='display:none'></th><th width='33%' align='center'>Driver Id</th><th width='33%' align='center'>Cab No</th><th width='33%' align='center'>Capacity</th></tr></thead><tbody>");
		    myList = json.list;	
		    if(myList.length==0){
		    	$("#cabDtl").append('<tr id="dummy"><td colspan="4" align="center"  style="color:blue">---  No Data Present   ---</td></tr>')
		    }
		    else{
			    for (var i = 0 ; i < myList.length ; i++) {
			        var row$ = $('<tr/>');
			        var isNewRecord = true;
			        for (var colIndex = 0 ; colIndex < headers.length ; colIndex++) {
			            var cellValue = myList[i][headers[colIndex]];
	
			            if (cellValue == null) { cellValue = ""; }
			            if(colIndex==0){						// CabId  as hidden field
			            	row$.append($('<td align="center" style="display:none">').append($("<input type='hidden' maxlength='15' size='15' autocomplete='off' />").val(cellValue)));
			            	//if(cellValue!= "") {isNewRecord = false;} // CabId  is not null/"" then it is old record
			            }
						else{
							if(!isNewRecord && colIndex!=3)		// not new record and not Capacity disable it
			            		row$.append($('<td align="center">').append($("<input type='Text' disabled maxlength='15' size='15' autocomplete='off' />").val(cellValue)));
							else{
								if (colIndex == 3)
									row$.append($('<td align="center">').append($("<input type='Text' maxlength='15' size='15' onkeypress='return common.isNumber(event)'/>").val(cellValue)));
								else							
									row$.append($('<td align="center">').append($("<input type='Text' maxlength='15' size='15' autocomplete='off' />").val(cellValue)));	
							}
						}	
			            $("#cabDtl").append(row$);
			        }
			    }
		    }
		}
		buildHtmlTable(json);
		 
		function tableToJson(table) {
			var json = {}
		    var data = [];
			alert(table.rows.length);
			if(table.rows.length == 2 && document.getElementById('dummy')){
				alert("Nothing to Save");
				 return false;
			}
			
		    for (var i=1; i<table.rows.length; i++) {
		        var tableRow = table.rows[i];
		        var rowData = {};
		        for (var j=0; j<tableRow.cells.length; j++) {
		        	 var value = tableRow.cells[j].getElementsByTagName('input')[0].value;
		        	 if(j!=0 && (!value || value=="")){
		        		 alert("Please Enter "+ ColName[j]);
		        		 return false;
		        	  }
		            rowData[ headers[j] ] = tableRow.cells[j].getElementsByTagName('input')[0].value;	
		        }
		        data.push(rowData);
		    }
		     json["list"]= data;
		     alert(JSON.stringify(json))
		     return json;
		}
		
		$("#save").click(function() {
			var json = tableToJson(document.getElementById('cabDtl'));
			  console.log(json); 
			  if(!json) return;
			   $.ajax({
				    url: url,
				    type: "POST",
				    data: JSON.stringify(data),
				    contentType: "application/json",
				    complete: callback,
				    success: function (msg) {
				    	 if (msg) {
			                   alert("");
			               } else {
			                  alert("Something went wrong !!!");
			            }
				    }
				    
				}); 
		});
		
		var $placeholder = $('input[placeholder]');
		if ($placeholder.length > 0) {
			var attrPh = $placeholder.attr('placeholder');
			$placeholder.attr('value', attrPh)
			  .bind('focus', function() {
				var $this = $(this);
				if($this.val() === attrPh)
					$this.val('').css('color','#171207');
			}).bind('blur', function() {
				var $this = $(this);
				if($this.val() === '')
					$this.val(attrPh).css('color','#333');
			});

		}

	});
	
	
	
	
	
</script>
</html>